<script lang='ts' setup>
import { ElMessage } from 'element-plus'
import { ref, watch, reactive } from 'vue'
import UnitTree from './unit-tree.vue'

const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'changeUnit', data: any): void
}>()

const props = defineProps({
    /**是否显示 */
    visible: {
        type: Boolean,
        default: false
    },
    showCheckbox: {
        type: Boolean,
        default: false
    }
})

const unitTreeRef = ref()

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

//双向绑定选中的部门值
const UnitTreeDialogState = reactive({
    onOkButtonClick: () => {
        let data = ''
        if (props.showCheckbox) {
            //获取树选中的多条数据
            data = unitTreeRef.value.getCheckedNodes()
        } else {
            //获取树选中的单条数据
            data = unitTreeRef.value.getSelectedData()
        }
        if (!data) {
            //如果data数据为空 则做处理
            ElMessage({ message: '请先选择部门', type: 'error' })
            return
        }
        console.log('selectData', data)
        visibleModelValue.value = false
        emit("changeUnit", data)
    }
})


</script>
<template>
    <div class="vms-unit-tree-dialog">
        <slot></slot>
        <el-dialog v-model="visibleModelValue" width="30%" destroy-on-close>
            <template #title>
                <span class="jxtech-card-title">选择部门</span>
            </template>
            <div class="vms-unit-tree-dialog-body">
                <unit-tree ref="unitTreeRef" :show-checkbox="showCheckbox"></unit-tree>
            </div>
            <template #footer>
                <jxtech-cancel-button @click="visibleModelValue = false"></jxtech-cancel-button>
                <jxtech-ok-button @click="UnitTreeDialogState.onOkButtonClick"></jxtech-ok-button>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.vms-unit-tree-dialog {
    width: 100%;
    ::v-deep(.el-dialog__body) {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    ::v-deep(.el-dialog__header) {
        padding: 6px 16px;
    }
    ::v-deep(.el-dialog__headerbtn) {
        top: 16px;
    }
    ::v-deep(.el-dialog__footer) {
        border-top: 1px solid var(--el-border-color-base);
        padding-bottom: 10px;
    }
    .vms-unit-tree-dialog-body {
        height: 520px;
        overflow: auto;
    }
}
</style>